@using ApplicationManager.Model
@model IEnumerable<AppInfoModel>

@{
    ViewData["Title"] = "Application Manager";
}

<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/css/style.min.css" rel="stylesheet">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img src="/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 应用</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="lyear_pages_doc.html">应用管理</a> </li>

                            </ul>
                        </li>

                    </ul>
                </nav>


            </div>

        </aside>
        <!--End 左侧导航-->
        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 应用 - 应用管理 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="/images/users/avatar.jpg" alt="盯工程" />
                                <span>盯工程 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>

                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createAppModal">
                                    新增
                                </button>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>

                                                <th>应用名称</th>
                                                <th>应用程序</th>
                                                <th>应用参数</th>
                                                <th>进程ID</th>
                                                <th>备注</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var app in Model)
                                            {
                                                <tr>

                                                    <td>@app.Name</td>
                                                    <td>@app.App</td>
                                                    <td>@app.Args</td>
                                                    <td>@app.ProcessId</td>
                                                    <td>@app.Remarks</td>

                                                    <td>@(app.Status ? "Running" : "Stopped")</td>
                                                    <td>
                                                        @if (app.Status)
                                                        {
                                                            <button class="btn btn-danger btn-sm stop-btn" data-id="@app.Id">Stop</button>
                                                        }
                                                        else
                                                        {
                                                            <button class="btn btn-success btn-sm start-btn" data-id="@app.Id">Start</button>
                                                            <button class="btn btn-warning btn-sm delete-btn" data-id="@app.Id">Delete</button>
                                                        }
                                                    </td>
                                                </tr>
                                            }

                                        </tbody>
                                    </table>
                                </div>


                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="modal fade" id="createAppModal" tabindex="-1" aria-labelledby="createAppModalLabel" aria-hidden="true">
                <div class="card">
                    <div class="card-header"><h4>新建应用</h4></div>
                    <div class="card-body">

                        <form id="createAppForm">
                            <div class="form-group">
                                <label for="Name">Application Name</label>
                                <input type="text" class="form-control" id="Name" name="Name" required>
                            </div>
                            <div class="form-group">
                                <label for="App">Application Path</label>
                                <input type="text" class="form-control" id="App" name="App" required>
                            </div>
                            <div class="form-group">
                                <label for="Args">Arguments</label>
                                <input type="text" class="form-control" id="Args" name="Args">
                            </div>
                            <div class="form-group">
                                <label for="Remarks">Remarks</label>
                                <textarea class="form-control" id="Remarks" name="Remarks" rows="3"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Create Application</button>
                        </form>

                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Handle create application form submit
        $('#createAppForm').on('submit', function(e) {
            e.preventDefault();
            const formData = $(this).serialize();
            $.post('/AppManager/Create', formData, function(data) {
                if (data) {
                    alert('Application created successfully!');
                    location.reload();
                } else {
                    alert('Failed to create application!');
                }
            });
        });

        // Start, Stop, and Delete buttons functionality
        $('.start-btn').click(function() {
            const appId = $(this).data('id');
            $.post('/AppManager/Start', { id: appId }, function(data) {
                if (data) {
                    alert('Application started successfully!');
                    location.reload();
                }
            });
        });

        $('.stop-btn').click(function() {
            const appId = $(this).data('id');
            $.get('/AppManager/Stop', { id: appId }, function(data) {
                if (data) {
                    alert('Application stopped successfully!');
                    location.reload();
                }
            });
        });

        $('.delete-btn').click(function() {
            const appId = $(this).data('id');
            $.get('/AppManager/Delete', { id: appId }, function(data) {
                if (data) {
                    alert('Application deleted successfully!');
                    location.reload();
                }
            });
        });
    });
</script>